<template>
	<view>
		<view class="video-cont">
			<!-- 视频 -->
			<video
				class="video-box"
				id="myVideo"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126.mp4"
				:controls="true"
				poster="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1662653896,2809442750&fm=26&gp=0.jpg"
				objectFit="cover"
			></video>
		</view>
		<!-- 视频信息 -->
		<view class="video-info">
			<!-- 标题 -->
			<view class="video-title">肖申克的救赎</view>
			<!-- 简介 -->
			<view class="video-detail">
				<text>
					故事发生在1947年，银行家安迪（Andy）被指控枪杀了妻子及其情人，
					《肖申克的救赎》海报
					《肖申克的救赎》海报(8张)
					 安迪被判无期徒刑，这意味着他将在肖申克监狱中渡过余生。
				</text>
			</view>
			<!-- 推荐视频 -->
			<view class="video-list">
				<video-list></video-list>
			</view>
		</view>
	</view>
</template>

<script>
	import videoList from "../com/recommend-list.vue";
	
	export default {
		components: {
			videoList
		},
		data() {
			return {
				
			};
		},
		onLoad({id}) {
			this.getVideo(id)
		},
		methods: {
			async getVideo(id) {
				const res = await ActivityApi.getVideo({id})
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
.video-cont {
	width: 100vw;
	height: 423rpx;
	.video-box {
		width: 100vw;
		height: 423rpx;
	}
}
.video-info{
	padding: 26rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 26rpx);
	.video-title{
		font-size: 26rpx;
		color: $text-color;
		font-weight: bold;
		line-height: 17rpx;
		margin-bottom: 24rpx;
	}
	.video-detail{
		font-size: 24rpx;
		color: $text-color-grey;
		line-height: 28rpx;
		margin-bottom: 48rpx;
	}
	.video-list{
		padding-top: 30rpx;
		background-color: $color-white;
		box-shadow: 2rpx 3rpx 6rpx rgba(#000, .1);
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
}
</style>
